<template>
  <div>
    <div>
      <el-button type="success" @click="handleShowSaveDialog">新增</el-button>
    </div>
    <!-- 用户分页列表表格 -->
    <div>
      <el-table :data="brands" stripe style="width: 100%">
        <el-table-column prop="name" label="品牌名称" width="100" />
        <el-table-column prop="logo" label="品牌图标" #default="scope">
          <img :src="scope.row.logo" alt="" style="width:40px;height:40px;" />
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">
              修改
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:20px;text-align:center">
        <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[1, 2, 3, 4, 5]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="initPageData"
          @current-change="initPageData"
        />
      </div>
    </div>

    <!-- 新增/修改品牌的对话框 -->
    <div>
      <el-dialog v-model="dialogFormVisible" title="添加或修改">
        <el-form :model="brand">
          <el-form-item label="品牌名称" :label-width="formLabelWidth">
            <el-input v-model="brand.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="品牌logo" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              :action="uploadPath"
              :show-file-list="false"
              :headers="headers"
              :data="{ module: 'logo' }"
              :on-success="handleLogoSuccess"
            >
              <img v-if="brand.logo" :src="brand.logo" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSaveOrUpdateBrand">
              提交
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  GetBrands,
  GetBrandById,
  UpdateBrand,
  DeleteBrand,
  SaveBrand,
} from '@/api/brand'
import { useApp } from '@/pinia/modules/app'
//修改按钮事件函数
const handleEdit = async row => {
  const { data } = await GetBrandById(row.id)
  brand.value = data.item
  dialogFormVisible.value = true
}

//新增修改对话框属性和函数
const dialogFormVisible = ref(false)
const brand = ref({})
const formLabelWidth = '120px'
const headers = { token: useApp().authorization.token } //上传组件请求携带的请求头
const uploadPath = 'http://localhost:8501/admin/system/file/upload'
const handleLogoSuccess = r => {
  //上传成功的回调
  brand.value.logo = r.data.path
  //关闭对话框
  ElMessage.success('logo上传成功')
  // dialogFormVisible.value = false
}
//对话框提交按钮事件函数
const handleSaveOrUpdateBrand = () => {
  if (brand.value.id) {
    handleUpdateBrand()
  } else {
    handleSaveBrand()
  }
}
//新增品牌
const handleSaveBrand = async () => {
  await SaveBrand(brand.value)
  ElMessage.success('新增成功')
  dialogFormVisible.value = false
  initPageData()
}
//更新品牌
const handleUpdateBrand = async () => {
  await UpdateBrand(brand.value)
  ElMessage.success('更新成功')
  dialogFormVisible.value = false
  initPageData()
}

//新增按钮
const handleShowSaveDialog = () => {
  brand.value = {}
  dialogFormVisible.value = true
}
//删除
const handleDelete = async row => {
  await DeleteBrand(row.id)
  ElMessage.success('删除成功')
  initPageData()
}

const pageNum = ref(1)
const pageSize = ref(3)
const total = ref(0)
const brands = ref([])

const initPageData = async () => {
  const { data } = await GetBrands(pageNum.value, pageSize.value)
  brands.value = data.page.list
  total.value = data.page.total
}

onMounted(() => {
  initPageData()
})
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
